@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('//at.alicdn.com/t/webfont_lztjdydksr.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/webfont_lztjdydksr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('//at.alicdn.com/t/webfont_lztjdydksr.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_lztjdydksr.woff') format('woff'), /* chrome、firefox */
    url('//at.alicdn.com/t/webfont_lztjdydksr.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/webfont_lztjdydksr.svg#杨任东竹石体-Bold') format('svg'); /* iOS 4.1- */
}
body,html{
    background-color: #f6f6f8;
    a{
        text-decoration: none;
    }
    ul>li{
        list-style: none;
    }
}
#pages{
    max-width: 768px;
    height: 100%;
    margin: 0 auto;
    .more{
        width: 90%;
        margin: 20px auto;
        .hot_title{
            width: 100%;
            font-family: 'webfont';
            font-size: 20px;
            padding-left: 10px;
            border-left: 2px solid blue;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0;
            li{
                width: 48%;
                background-color: #fff;
                margin-top: 8px;
                // padding-bottom: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                a{
                    color: #000;
                    text-decoration: none;
                }
                .img{
                    position: relative; 
                    .flag{
                        position: absolute;
                        top: 0;
                        left: 0px;
                        padding: 3px 8px;
                        color: white;
                        background-color: #c8431a;
                        font-size: 12px;
                        border-bottom-right-radius: 10px;
                    }
                    img{
                        display: block;
                        width: 100%;
                        border-radius: 10px;
                    }
                    .desc{
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        padding: 5px 10px;
                        background-color: rgba(0, 0, 0, .5);
                        color: #fff;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
               
                .title{
                    margin: 5px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-overflow: -o-ellipsis-lastline;
                    display: -webkit-box;
                    line-clamp: 2;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .price{
                    color: #ff7400;
                    padding-bottom: 30px;
                }
                .data{
                    margin-top: 5px;
                    width: 100%;
                    height: 28px;
                    line-height: 28px;
                    background-color: #e8e8e8;
                    font-size: 12px;
                    color: #81666f;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    padding-left: 20px;
                    position: absolute;
                    bottom: 0;
                }
            }
        } 
    }
}